<template>
	<div class="game-container report-container addAgent-container">
		<div class="line-member"></div>
		<div
			class="addAgent-content"
			v-loading="loading"
			element-loading-spinner="el-icon-loading"
		>
			<div class="form-header">
				<span>通用俱乐部限制</span>
			</div>
			<el-form ref="form" :model="form" label-width="auto" :rules="rules">
				<el-form-item label="俱乐部人数上限" prop="upperLimit">
					<!-- :max="max.upperLimit" -->
					<el-input-number
						v-model.number="form.upperLimit"
						size="medium"
						placeholder="请输入正整数"
						clearable
						step-strictly
						show-word-limit
						:min="minDefault"
						style="width: 365px"
						controls-position="right"
						v-input="{ name: 'int' }"
					/>
				</el-form-item>
				<el-form-item label="同时开牌桌上限" prop="cardTableLimit">
					<!-- :max="max.cardTableLimit" -->
					<el-input-number
						v-model.number="form.cardTableLimit"
						size="medium"
						step-strictly
						placeholder="请输入正整数"
						clearable
						show-word-limit
						:min="minDefault"
						style="width: 365px"
						controls-position="right"
						v-input="{ name: 'int' }"
					/>
				</el-form-item>
				<el-form-item label="单牌桌旁观人数上限" prop="lookOnLimit">
					<!-- :max="max.lookOnLimit" -->
					<el-input-number
						controls-position="right"
						v-model.number="form.lookOnLimit"
						size="medium"
						step-strictly
						placeholder="请输入正整数"
						clearable
						show-word-limit
						:min="minDefault"
						style="width: 365px"
						v-input="{ name: 'int' }"
					/>
				</el-form-item>
				<el-form-item
					label="单牌桌累计可坐下人数上限"
					prop="sitDownLimit"
				>
					<!-- :max="max.sitDownLimit" -->
					<el-input-number
						controls-position="right"
						v-model.number="form.sitDownLimit"
						size="medium"
						step-strictly
						placeholder="请输入正整数"
						clearable
						show-word-limit
						:min="minDefault"
						style="width: 365px"
						v-input="{ name: 'int' }"
					/>
				</el-form-item>
				<el-form-item label="单牌桌累计带入上限" class="is-required">
					<el-row>
						<el-col :span="5">
							<label class="edit-form-item__label">
								德州扑克
							</label>
						</el-col>
						<el-col :span="17">
							<el-form-item prop="texasBringInLimit">
								<!-- :max="max.texasBringInLimit" -->
								<el-input-number
									controls-position="right"
									v-model.number="form.texasBringInLimit"
									size="medium"
									step-strictly
									placeholder="请输入正整数"
									clearable
									show-word-limit
									:min="minDefault"
									style="width: 190px"
									v-input="{ name: 'int' }"
								/>
								<label class="edit-form-item__label">
									倍BB
								</label>
							</el-form-item>
						</el-col>
					</el-row>
					<div style="height: 20px;"></div>
					<el-row>
						<el-col :span="5">
							<label class="edit-form-item__label">短牌</label>
						</el-col>
						<el-col :span="17">
							<el-form-item prop="shortCardBringInLimit">
								<!-- :max="max.shortCardBringInLimit" -->
								<el-input-number
									controls-position="right"
									v-model.number="form.shortCardBringInLimit"
									size="medium"
									step-strictly
									placeholder="请输入正整数"
									clearable
									show-word-limit
									:min="minDefault"
									style="width: 190px"
									v-input="{ name: 'int' }"
								/>
								<label class="edit-form-item__label">
									倍Ante
								</label>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form-item>
				<el-form-item>
					<el-button
						v-if="hasPermission('90150037')"
						type="primary"
						size="medium"
						:disabled="loading"
						@click="handleSubmit"
					>
						设置
					</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
import { routerNames } from '@/utils/consts'
import list from '@/mixins/list'

export default {
	name: routerNames.generalClubManage,
	mixins: [list],
	data() {
		return {
			loading: false,
			minDefault: 1,
			maxK: {
				// 大小限制
				upperLimit: 'club.maximum.number',
				cardTableLimit: 'maximum.simultaneous.limit',
				lookOnLimit: 'maximum.onlookers.limit',
				sitDownLimit: 'maximum.sit.limit',
				texasBringInLimit: 'texas.upper.limit',
				shortCardBringInLimit: 'short.upper.limit'
			},
			max: {
				// 大小限制
				upperLimit: 1, // club.maximum.number 俱乐部人数上限
				cardTableLimit: 1, // maximum.simultaneous.limit 同时开牌桌上限
				lookOnLimit: 1, // maximum.onlookers.limit 单牌桌旁观人数上限
				sitDownLimit: 1, // maximum.sit.limit 单牌桌可坐下人数上限
				texasBringInLimit: 1, // texas.upper.limit 德州单牌桌累计带入上限（倍BB）
				shortCardBringInLimit: 1 // short.upper.limit 短牌单牌桌累计带入上限（倍Ante）
			},
			form: {
				upperLimit: 1,
				cardTableLimit: 1,
				lookOnLimit: 1,
				sitDownLimit: 1,
				texasBringInLimit: 1,
				shortCardBringInLimit: 1
			}
		}
	},
	computed: {
		rules() {
			const formRules = {}
			Object.keys(this.form).forEach((key) => {
				formRules[key] = [
					{
						required: true,
						trigger: 'blur',
						validator: (rule, value, callback) => {
							if (!value) {
								return callback(new Error('输入框不能为空'))
							} else if (!this.max[key]) {
								return callback(
									new Error(
										this.$t(
											'dxn.game_rule.get_max_limit_error'
										)
									)
								)
							} else if (value > this.max[key]) {
								return callback(
									new Error(
										this.$t(
											'dxn.game_rule.max_limit_tips'
										) + this.max[key]
									)
								)
							} else {
								return callback()
							}
						}
					}
				]
			})
			return formRules
		}
	},
	created() {
		this.queryClubParam()
		this.getGameSystemKvconfigValue()
	},
	methods: {
		// 获取系统参数字典配置值
		getGameSystemKvconfigValue() {
			Object.keys(this.max).forEach((key) => {
				this.max[key] = undefined
			})
			const params = { tag: 'game' }
			this.$api
				.getSystemKvconfigByTag(params)
				.then((res) => {
					if (res?.code === 200) {
						const configArr = res?.data || []
						configArr.forEach((item) => {
							Object.keys(this.maxK).forEach((key) => {
								if (this.maxK[key] === item.k) {
									this.max[key] = Number(item.v)
								}
							})
						})
					}
				})
				.catch(() => {})
		},
		async queryClubParam() {
			this.loading = true
			await this.$api
				.clubManageQueryClubParam({})
				.then((res) => {
					if (res?.code === 200 && res?.data) {
						const {
							cardTableLimit = 1,
							upperLimit = 1,
							lookOnLimit = 1,
							sitDownLimit = 1,
							texasBringInLimit = 1,
							shortCardBringInLimit = 1
						} = res.data

						this.form.cardTableLimit = cardTableLimit
						this.form.upperLimit = upperLimit
						this.form.lookOnLimit = lookOnLimit
						this.form.sitDownLimit = sitDownLimit
						this.form.texasBringInLimit = texasBringInLimit
						this.form.shortCardBringInLimit = shortCardBringInLimit
					}
				})
				.catch(() => {})
				.finally(() => {
					this.loading = false
				})
		},
		handleSubmit() {
			const params = {}
			Object.keys(this.form).forEach((k) => {
				params[k] = parseInt(this.form[k]) || 0
			})

			this.$refs.form.validate((valid) => {
				if (valid) {
					this.loading = true
					this.$api
						.clubManageAddUpdateClubParam(params)
						.then((res) => {
							if (res?.code === 200 && res?.data) {
								this.$message.success('修改成功')
							} else {
								this.$message.error('修改失败')
							}
						})
						.catch(() => {})
						.finally(() => {
							this.loading = false
						})
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
	text-align: center;
	color: #909399;
	font-weight: 700;
}
.addAgent-container {
	background-color: #f5f5f5;
	margin: 0;
	min-height: calc(100vh - 105px);
	.line-member {
		height: 50px;
	}
	.addAgent-content {
		width: 1000px;
		margin: 0 auto;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #fff;
		position: relative;
		padding-top: 65px;
		padding-bottom: 65px;
		.form-header {
			height: 45px;
			line-height: 45px;
			span:nth-child(1) {
				position: absolute;
				left: 30px;
				top: 0;
				color: #666;
				font-size: 14px;
				font-weight: 700;
			}
			span:nth-child(2) {
				position: absolute;
				right: 30px;
				color: #999;
				font-weight: 400;
				font-size: 14px;
				top: 0;
			}
		}
		.tips {
			color: #f56c6c;
			font-size: 12px;
			line-height: 1;
			padding-top: 4px;
			position: absolute;
			top: 100%;
			left: 0;
		}
	}
	.addAgent-content::after {
		position: absolute;
		top: 45px;
		content: '';
		width: 100%;
		background-color: rgba(233, 233, 233, 1);
		height: 1px;
	}
}
.edit-form-item__label {
	text-align: right;
	vertical-align: middle;
	font-size: 14px;
	color: #606266;
	line-height: 40px;
	padding: 0 12px 0 0;
	box-sizing: border-box;
}
</style>
